
// 屏幕在右半区的布局

/*
Panel (new canvas)
├── Background
├── Bottom
├── Window
├── Desk (new canvas)
│   ├── TitleFrame (new canvas)
│   │     运动的 z-index=50, 其它 z-index=20
│   ├── DeskBackground
|   |     z-index=20
│   ├── Desktop
│   │   ├── Content (new canvas)
│   │   │     z-index=30, 50
*/

/**
 * @param {(x:number,y:number)=>string} fPath 
 * @param {number} width 
 * @param {number} height 
 */
function fPathDetails(fPath, width, height) {
	return {
		fPath, width, height, path : fPath(0, 0)
	};
}

/**
 * @param {string} ch
 * @returns {{width:number, height:number, path:string, fPath:(x:number,y:number)=>string}}
 */
function charPathFactory(ch) {
	return layout.charPath[ch] || layout.charPath['none'];
}

/**
 * @param {string} text
 * @param {{ spacing?:number }} options
 */
function buildTextPath(text, options = {}) {
	if (text == '') {
		return { path : '', width : 0, height : 0, };
	}
	if (text.length == 1) {
		const detail = charPathFactory(text);
		return { path : detail.path, width : detail.width, height : detail.height, };
	}

	/** @type {{fPath:(x: number, y: number) => string, width:number, height:number}[]} */
	const chDetails = new Array(text.length).fill().map((_, index) => layout.charPath[text[index]]);

	const offX = options.spacing == null ? 2 : options.spacing;
	let xx = 0;
	let maxH = 0;
	const path = chDetails.map(o => {
		o = o == null ? layout.charPath.none : o;
		const p = o.fPath(xx, 0);
		xx += (o.width + offX);
		maxH = Math.max(maxH, o.height);
		return p;
	}).join(' ');

	return {
		path, width: xx - offX, height: maxH,
	};
}

var layout = {
	global : {
		width : 1920,
		height : 1080
	},
	config : {
		// 设置 desk 在左侧还是右侧
		setDestLeft : function(left) {
			if (left) {
				layout.windows[0].x = 598;
				layout.desk.x = 0;
			} else {
				layout.windows[0].x = 6;
				layout.desk.x = 1328;
			}
		}
	},
	windows : [
		{ x : 598, y : 6, width : 1316, height : 999, strokeWidth : 12 },
	],
	bottom : { // x-y 左上角位置
		x : 0,
		y : 1080 - 67,
		width : 1920,
		height : 67,
	},
	desk : { // 相对于上层 (panel)
		x : 0,
		y : 0,
		width : 592,
		height : 1080 - 67,
	},
	titleFrame : { // 相对于上层 (desk), x-y 左上角位置
		x : 0,
		y : 78,
		width : 593,
		height : 140,

		contentX : 0,
		contentY : 10,
		contentWidth : 593,
		contentHeight : 120,
	},
	desktop : { // 相对于上层 (desk)
		x : 34,
		y : 453,
		width : 524,
		height : 486,

		footerX : 12,
		footerY : 470,
		footerWidth : 500,
		footerShapeX : 60,

		iconLeftX : 98,
		iconRightX : 450,
		iconOffsetX : 45,
		iconY : 510,

		textLeftX : 162,
	},
	content : { // 相对于上层 (desktop), x-y 左上角位置
		x : 0,
		y : 0,
		width : 524,
		height : 486,

		animationOffsetX : 262,
	},
	colors : {
		strokeNormal : '#85d6ff', // 天蓝
		strokeD1 : '#4b97ca',
		strokeD2 : '#2f668b',

		strokeBgD3 : '#00080f', // 暗蓝, 暗 3 点
		strokeBgD2 : '#010e1c', // 暗蓝, 暗 2 点
		strokeBgD1 : '#021529', // 暗蓝, 暗 1 点
		strokeBg : '#05213d', // 暗蓝
		strokeBgL1 : '#0e365e', // 暗蓝, 亮 1 点
		strokeBgL2 : '#1d4f81', // 暗蓝, 亮 2 点
		strokeBgL3 : '#3e71a4', // 暗蓝, 亮 3 点 (比 strokeD2 要亮)

		nameTagNormal : '#584c80', // 紫
		nameTagBgL3 : '#45396c', // 紫, 亮 3 点
		nameTagBgL2 : '#312754', // 紫, 亮 2 点
		nameTagBgL1 : '#21183e', // 紫, 亮 1 点
		nameTagBg : '#150e2c', // 深紫
		nameTagBgD1 : '#0c0a19', // 紫, 暗 1 点

		yellowNormal : '#fff54d', // 黄
		redNormal : '#c23d60', // 红

		// 含透明度 transparent
	},
	charPath : {
		A : fPathDetails((x, y) => `M${x+2},${y}h6v10h-2v-4h-4v4h-2v-8h2v-2Zm0,2v2h4v-2h-4Z`, 8, 10),
		B : fPathDetails((x, y) => `M${x},${y}h6v2h-4v2h4v-2h2v2h-2v2h2v2h-2v-2h-4v2h4v2h-6v-10z`, 8, 10),
		C : fPathDetails((x, y) => `M${x},${y}v10h8v-2h-6v-6h6v-2h-8z`, 8, 10),
		D : fPathDetails((x, y) => `M${x},${y}v10h8v-6h-2v4h-4v-6h2v2h2v-2h-2v-2h-4z`, 8, 10),
		E : fPathDetails((x, y) => `M${x},${y}v10h8v-2h-6v-2h4v-2h-4v-2h4v-2z`, 8, 10),
		F : fPathDetails((x, y) => `M${x},${y}v10h2v-4h4v-2h-4v-2h6v-2z`, 8, 10),
		G : fPathDetails((x, y) => `M${x},${y}h8v2h-6v6h4v-2h-2v-2h4v6h-8v-10z`, 8, 10),
		H : fPathDetails((x, y) => `M${x},${y}h2v4h4v-4h2v10h-2v-4h-4v4h-2v-10z`, 8, 10),
		I : fPathDetails((x, y) => `M${x},${y}h6v2h-2v6h2v2h-6v-2h2v-6h-2v-2z`, 6, 10),
		J : fPathDetails((x, y) => `M${x},${y}h8v6h-2v2h-2v2h-4v-4h2v2h2v-2h2v-4h-6v-2z`, 8, 10),
		K : fPathDetails((x, y) => `M${x},${y}h2v4h2v-2h2v-2h2v2h-2v2h-2v2h2v2h2v2h-2v-2h-2v-2h-2v4h-2v-10z`, 8, 10),
		L : fPathDetails((x, y) => `M${x},${y}v10h8v-2h-6v-8z`, 8, 10),
		M : fPathDetails((x, y) => `M${x},${y}h2v2h2v2h2v-2h2v-2h2v10h-2v-6h-2v6h-2v-6h-2v6h-2v10z`, 10, 10),
		N : fPathDetails((x, y) => `M${x},${y}h2v2h2v2h2v2h2v-6h2v10h-2v-2h-2v-2h-2v-2h-2v6h-2v-10z`, 10, 10),
		O : fPathDetails((x, y) => `M${x},${y+2}v8h6v-2h2v-8h-6v2h4v6h-4v-6z`, 8, 10),
		P : fPathDetails((x, y) => `M${x},${y}h6v2h-4v4h4v-4h2v4h-2v2h-4v2h-2v-10z`, 8, 10),
		Q : fPathDetails((x, y) => `M${x},${y+2}h4v2h-4v6h2v-2h2v-4h2v4h-2v2h2v2h-6v-2h-2v-6h2v-2z`, 8, 10),
		R : fPathDetails((x, y) => `M${x},${y}v10h2v-4h4v4h2v-4h-2v-2h-4v-2h4v2h2v-2h-2v-2z`, 8, 10),
		S : fPathDetails((x, y) => `M${x+2},${y}h6v2h-6v2h6v4h-2v2h-6v-2h6v-2h-6v-4h2v-2z`, 8, 10),
		T : fPathDetails((x, y) => `M${x},${y}h10v2h-4v8h-2v-8h-4v-2z`, 10, 10),
		U : fPathDetails((x, y) => `M${x},${y}h2v8h-2v-8Zm6,0h2v10h-6v-2h4v-8Z`, 8, 10),
		V : fPathDetails((x, y) => `M${x},${y}h2v6h2v2h2v-2h2v-6h2v6h-2v2h-2v2h-2v-2h-2v-2h-2v-6z`, 10, 10),
		W : fPathDetails((x, y) => `M${x},${y}h2v8h2v-4h2v4h2v-8h2v8h-2v2h-2v-2h-2v2h-2v-2h-2v-8z`, 10, 10),
		X : fPathDetails((x, y) => `M${x},${y}v4h2v2h-2v4h2v-4h4v4h2v-4h-2v-2h2v-4h-2v4h-4v-4z`, 8, 10),
		Y : fPathDetails((x, y) => `M${x},${y}h2v2h2v2h2v-2h2v-2h2v2h-2v2h-2v6h-2v-6h-2v-2h-2v-2z`, 10, 10),
		Z : fPathDetails((x, y) => `M${x},${y}h8v4h-2v2h-4v2h6v2h-8v-4h2v-2h4v-2h-6v-2z`, 8, 10),
		e : fPathDetails((x, y) => `M${x+2},${y+2}h5v1h1v2h-1v1h-1v1h-3v1h4v-1h1v2h-1v1h-5v-1h-1v-1h-1v-4h1v-1h1v-1Zm1,2v1h-1v1h3v-1h1v-1h-3Z`, 8, 10),
		i : fPathDetails((x, y) => `M${x+2},${y}h2v2h-2v-2Zm0,4h2v6h-2v-6Z`, 6, 10),
		n : fPathDetails((x, y) => `M${x},${y+4}h2v1h1v-1h4v1h1v5h-2v-4h-3v1h-1v3h-2v-6Z`, 8, 10),
		u : fPathDetails((x, y) => `M${x},${y+4}h2v4h3v-1h1v-3h2v6h-2v-1h-1v1h-4v-1h-1v-5Z`, 8, 10),
		' ':fPathDetails(() => '', 8, 10),
		'\n':fPathDetails(() => '', 0, 10),
		'.':fPathDetails((x, y) => `M${x},${y+6}h4v4h-4v-4z`, 6, 10),
		',':fPathDetails((x, y) => `M${x},${y+4}h4v4h-2v2h-2v-2h2v-2h-2v-2z`, 6, 10),
		':':fPathDetails((x, y) => `M${x},${y+2}h2v2h-2v-2zm0,4h2v2h-2v-2z`, 6, 10),
		'-':fPathDetails((x, y) => `M${x},${y+4}h8v2h-8Z`, 8, 10),
		'?':fPathDetails((x, y) => `M${x},${y}h6v4h-2v-2h-4v-2Zm2,4h2v2h-2v-2Zm0,4h2v2h-2v-2Z`, 6, 10),
		'#':fPathDetails((x, y) => `M${x+2},${y}h2v2h2v-2h2v2h2v2h-2v2h2v2h-2v2h-2v-2h-2v2h-2v-2h-2v-2h2v-2h-2v-2h2Zm2,4v2h2v-2Z`, 10, 10),
		'1':fPathDetails((x, y) => `M${x+2},${y}h2v10h-2v-6h-2v-2h2v-2Z`, 6, 10),
		'2':fPathDetails((x, y) => `M${x},${y}h6v2h-6v-2Zm6,2h2v2h-2v-2Zm-4,2h4v2h-4v-2Zm-2,2h2v2h6v2h-8v-4Z`, 8, 10),
		'3':fPathDetails((x, y) => `M${x},${y}h6v2h-6v-2Zm6,2h2v8h-8v-2h6v-2h-4v-2h4v-2Z`, 8, 10),
		'4':fPathDetails((x, y) => `M${x},${y}h2v4h-2v-4Zm6,0h2v10h-2v-4h-4v-2h4v-4Z`, 8, 10),
		'5':fPathDetails((x, y) => `M${x},${y}h6v2h-4v2h6v6h-8v-2h6v-2h-6v-6Z`, 8, 10),
		'6':fPathDetails((x, y) => `M${x+2},${y}h6v2h-6v-2Zm-2,2h2v2h6v4h-2v-2h-4v2h4v2h-6v-8Z`, 8, 10),
		'7':fPathDetails((x, y) => `M${x},${y}h8v4h-2v-2h-6v-2Zm4,4h2v2h-2v-2Zm-2,2h2v4h-2v-4Z`, 8, 10),
		'8':fPathDetails((x, y) => `M${x},${y}h8v10h-8v-10Zm2,2v2h4v-2h-4Zm0,4v2h4v-2h-4Z`, 8, 10),
		'9':fPathDetails((x, y) => `M${x},${y}h6v2h-4v2h-2v-4Zm6,2h2v8h-8v-2h6v-2h-4v-2h4v-2Z`, 8, 10),
		'0':fPathDetails((x, y) => `M${x+2},${y}h8v8h-2v-4h-2v-2h-4v-2Zm-2,2h2v4h2v-2h2v2h-2v2h4v2h-8v-8Z`, 10, 10),

		none : fPathDetails((x, y) => `M${x},${y+8}h8v2h-8z`, 8, 10),
	},
	buildTextPath,
	charPathFactory,
	iconPath : {
		loadout : {
			path : 'M2,0h10v8h-2v2h-10v-8h2Z M16,0h10v8h-2v2h-10v-8h2Z'
				+ 'M2,12h10v8h-2v2h-10v-8h2Z M16,12h10v8h-2v2h-10v-8h2Z',
			width : 26, height : 22, title : 'LOUDOUT'
		},
		codex : {
			path : 'M0,0H20V4H18V6H16V8H14V10H12V12H10V14H8V20H18V18H20V24H0Z'
				+ 'M2,2V4H12V2Z M2,6V8H8V6Z M2,10V12H4V10H2Z'
				+ 'M10,16H16V14H18V12H20V10H22V8H24V6H26V4H28V2H26V0H24V2H22V4H20V6H18V8H16V10H14V12H12V14H10Z',
			width : 28, height : 24, title : 'CODEX'
		},
		navi : {
			path : 'M8,0H12V4H10V6H8V8H6V10H0V8H2V6H4V4H6V2H8Z'
				+ 'M14,0H18V2H20V4H22V6H24V8H26V10H20V8H18V6H16V4H14Z'
				+ 'M20,12H26V14H24V16H22V18H20V20H18V22H14V18H16V16H18V14H20Z'
				+ 'M0,12H6V14H8V16H10V18H12V22H8V20H6V18H4V16H2V14H0Z'
				+ 'M12,6H14V8H16V10H18V12H16V14H14V16H12V14H10V12H8V10H10V8H12Z',
			width : 26, height : 22, title : 'NAVI'
		}
	},
	loudoutPath : {
		exports : {
			path : 'M2,1H6V2H2V3H1V9H8V8H9V5H10V8H9V9H8V10H0V3H1V2H2Z'
				+ 'M4,6H5V5H6V4H7V3H8V2H9V1H7V0H11V4H10V2H9V3H8V4H7V5H6V6H5V7H4Z',
			width : 11, height : 10
		},
		recycle : {
			path : 'M4,1H5V0H8V1H9V2H10V3H11V1H12V5H8V4H10V3H9V2H8V1H5V2H4Z'
				+ 'M0,3H4V7H3V5H2V6H1V9H2V10H5V11H2V10H1V9H0V6H1V5H2V4H0Z'
				+ 'M12,6H13V9H12V10H11V11H8V12H9V13H8V12H7V11H6V10H7V9H8V8H9V9H8V10H11V9H12Z',
			width : 13, height : 13
		}
	},
	contentShape : {
		/**
		 * @param {number} fo 嘴巴开口的左端的 x 值
		 * @param {number} w 总宽, 见 layout.desktop.width
		 * @param {number} h 总高, 见 layout.desktop.height
		 */
		build : function(path, fo, w, h) {
			path.moveTo(0, h - 28);
			path.lineTo(12, h - 16); // 45 度
			path.lineTo(fo + 9, h - 16);
			path.lineTo(fo + 25, h); // 45 度
			path.lineTo(fo + 50, h); // mouthWidth=50
			path.lineTo(fo + 66, h - 16); // 45 度
			path.lineTo(w - 12, h - 16);
			path.lineTo(w, h - 28); // 45 度

			path.lineTo(w, 16);
			path.lineTo(w - 16, 0); // 45 度
			path.lineTo(16, 0);
			path.lineTo(0, 16); // 45 度
			path.closePath();
		},
	},
};

export default layout;
